<!doctype html>
<html lang="en">
  <head>
    <%= htmlWebpackPlugin.options.tags.head %>
    <!-- 页面css -->
    <link rel="stylesheet" href="./css/articleDetailHtml.css" />
    <link rel="stylesheet" href="./css/mineNotice.css" />
  </head>

  <body>
    <div class="page">
      <header class="page-header">
        <div class="page-header-nav">
          <div class="header-nav-left">
            <span class="glyphicon glyphicon-menu-left nav-back-btn" onclick="router.back()"></span>
          </div>
          <div class="header-nav-title">
            <h2 class="flex-1 font-size-normal text-align-center">Notifications</h2>
          </div>
        </div>
        <div class="align-center bg-regular">
          <div class="tab-nav tab-nav-around list-type-tab">
            <div class="tab-nav-item active" data-role="System"><span class="tab-nav-name">System</span></div>
            <div class="tab-nav-item" data-role="Replies"><span class="tab-nav-name">Replies</span></div>
            <div class="tab-nav-item" data-role="Likes"><span class="tab-nav-name">Likes</span></div>
          </div>
        </div>
      </header>
      <!-- 内容主体 -->
      <main class="page-main">
        <!-- System -->
        <div id="System" class="display-none">
          <div class="flex-column flex-gap-10 margin-top-10">
            <div class="bg-regular flex-column padding-15">
              <div class="justify-between">
                <div class="align-center">
                  <img class="width-height-35 radius-round img-cover margin-right-10" src="./images/logo.ico" alt="" srcset="" />
                  <div class="flex-column">
                    <span>Inballbeat</span>
                    <span class="text-color-secondary">2 days ago</span>
                  </div>
                </div>
              </div>

              <div class="margin-top-10">
                <div class="article-detail-html">Hey guys! Welcome here! Today is your first day in 'All Footbal</div>
              </div>
            </div>

            <div class="bg-regular flex-column padding-15">
              <div class="justify-between">
                <div class="align-center">
                  <img class="width-height-35 radius-round img-cover margin-right-10" src="./images/logo.ico" alt="" srcset="" />
                  <div class="flex-column">
                    <span>Inballbeat</span>
                    <span class="text-color-secondary">2 days ago</span>
                  </div>
                </div>
              </div>

              <div class="margin-top-10">
                <div class="article-detail-html">Hey guys! Welcome here! Today is your first day in 'All Footbal</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Replies -->
        <div id="Replies">
          <div class="flex-column flex-gap-10 margin-top-10">
            <div class="bg-regular flex-column padding-10 padding-x-15">
              <div class="justify-between">
                <div class="align-center">
                  <img class="width-height-35 radius-round img-cover margin-right-10" src="./images/ball_park.png" alt="" srcset="" />
                  <div class="flex-column">
                    <span>Jack</span>
                    <span class="text-color-secondary">2 days ago</span>
                  </div>
                </div>
                <div class="flex flex-gap-20">
                  <a class="font-size-min text-color-secondary" href="editReply.html">Reply</a>
                  <img class="width-height-15" src="./images/thumbs_up.png" alt="" srcset="" />
                </div>
              </div>
              <div class="margin-top-10">
                <div class="article-detail-html">“If he misses, I kill him,” he laughed.</div>
              </div>

              <div class="bg-primary text-color-primary font-size-min padding-15 radius-base margin-top-10 text-ellipsis-3">
                <span>Alxe:</span>
                <span class="text-color-secondary">Yamel vs vin</span>
              </div>
            </div>
            <div class="bg-regular flex-column padding-10 padding-x-15">
              <div class="justify-between">
                <div class="align-center">
                  <img class="width-height-35 radius-round img-cover margin-right-10" src="./images/ball_park.png" alt="" srcset="" />
                  <div class="flex-column">
                    <span>Jack</span>
                    <span class="text-color-secondary">2 days ago</span>
                  </div>
                </div>
                <div class="flex flex-gap-20">
                  <a class="font-size-min text-color-secondary" href="editReply.html">Reply</a>
                  <img class="width-height-15" src="./images/thumbs_up.png" alt="" srcset="" />
                </div>
              </div>
              <div class="margin-top-10">
                <div class="article-detail-html">“If he misses, I kill him,” he laughed.</div>
              </div>

              <div class="bg-primary text-color-primary font-size-min padding-15 radius-base margin-top-10 text-ellipsis-3">
                <span>Alxe:</span>
                <span class="text-color-secondary">Yamel vs vin</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Likes -->
        <div id="Likes" class="display-none">
          <div class="flex-column flex-gap-10 margin-top-10">
            <div class="bg-regular flex-column padding-10 padding-x-15">
              <div class="justify-between">
                <div class="align-center">
                  <img class="width-height-35 radius-round img-cover margin-right-10" src="./images/ball_park.png" alt="" srcset="" />
                  <div class="flex-column">
                    <span>Jack</span>
                    <span class="text-color-secondary">2 days ago</span>
                  </div>
                </div>
              </div>

              <div class="bg-primary text-color-primary font-size-min padding-15 radius-base margin-top-10 text-ellipsis-3">
                <span>Alxe:</span>
                <span class="text-color-secondary">Yamel vs vin</span>
              </div>
            </div>
            <div class="bg-regular flex-column padding-10 padding-x-15">
              <div class="justify-between">
                <div class="align-center">
                  <img class="width-height-35 radius-round img-cover margin-right-10" src="./images/ball_park.png" alt="" srcset="" />
                  <div class="flex-column">
                    <span>Jack</span>
                    <span class="text-color-secondary">2 days ago</span>
                  </div>
                </div>
              </div>

              <div class="bg-primary text-color-primary font-size-min padding-15 radius-base margin-top-10 text-ellipsis-3">
                <span>Alxe:</span>
                <span class="text-color-secondary">Yamel vs vin</span>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <%= htmlWebpackPlugin.options.tags.foot %>
  </body>
</html>
